import React, { Component } from 'react'
import '../App.css'
import { Tabs, Input, Button, Toast } from 'react-vant'
import MyNav from './conponents/MyNav'
import Ctx from './store/Ctx'

export default class Add extends Component {
  static contextType = Ctx

  state = {
    type: 0, //0是支出 收入是1
    total: '',//金额 
    bz: '',//备注

    zclist: ['吃喝', '玩乐', '重置', '话费', '其他'],//支出数据
    zcIndex: 0,//下标
    srlist: ['工资', '兼职', '投资', '奖金', '其他'],//收入数据
    srIndex: 0,//下标
    zhlist: ['现金', '支付宝', '微信'],//账户数据
    zhIndex: 0,//下标
  }

  //支出方法
  changezcIndex = (index) => {
    this.setState({ zcIndex: index })
  }
  //收入方法
  changesrIndex = (index) => {
    this.setState({ srIndex: index })
  }
  //账户方法
  changezhIndex = (index) => {
    this.setState({ zhIndex: index })
  }

  render() {
    let { type, total, bz, zclist, zcIndex, srlist, srIndex, zhlist, zhIndex } = this.state
    //console.log(total);

    return (
      <div className='addbox'>

        {/* 标签页组件 */}
        <p className='addlist'>账目类型</p>
        <Tabs type='card' onChange={(index) => {
          this.setState({ type: index })
        }}>
          {['支出', '收入'].map(item => (
            <Tabs.TabPane key={item} title={item}>
            </Tabs.TabPane>
          ))}
        </Tabs>

        {/* 输入框组件 */}
        <p className='addlist'>请输入金额</p>
        <Input className='addInput'
          value={total}
          onChange={text => { this.setState({ total: text }) }}
          type='number'
          placeholder='请输入金额'
          clearable
        />

        <p className='addlist'>请选择分类</p>
        {
          type == 0 ? <MyNav data={zclist} dataIndex={zcIndex} setIndex={this.changezcIndex}
          ></MyNav> : <MyNav data={srlist} dataIndex={srIndex} setIndex={this.changesrIndex}></MyNav>
        }

        <p className='addlist'>请选择账户</p>
        <MyNav data={zhlist} dataIndex={zhIndex} setIndex={this.changezhIndex}></MyNav>


        {/* 多行输入框 */}
        <p className='addlist'>备注</p>
        <Input.TextArea className='addInput' placeholder="多行输入" value={bz} onChange={(e) => {
          //console.log(e);
          this.setState({ bz: e })
        }} />

        <div style={{ margin: '15px 0' }}>
          <Button type='primary' block onClick={() => {

            let title = type == 1 ? srlist[srIndex] : zclist[zcIndex]

            let obj = {
              id: new Date().getTime(),
              title,
              price: total,
              sed: false,
              type,
              bz
            }
            if (!total) {
              Toast.fail('金额不能为空')
              return
            }
            if (!bz) {
              Toast.fail('备注不能为空')
              return
            }
            this.context.add(obj)
            this.props.history.push('/home')

          }}>完成</Button>
        </div>

      </div>
    )
  }
}
